React

React 文档

React 使用

<div id='root'></div>
<!-- React 核心库，与宿主环境无关 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <!-- crossorigin 跨域资源显示报错信息 -->
<!-- 依赖核心库，将核心的功能与页面结合 -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
    let h1 = React.createElement('h1', {
      className: 'demo'
    }, '一级标题');
    ReactDOM.render(h1, document.getElementById('root'));
</script>

jsx

<div id='root'></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type='text/babel'>
    let h1 = <h1>一级标题<span>hello world</span></h1>
    ReactDOM.render(h1, document.getElementById('root'));
</script>

脚手架搭建

npm install -g create-react-app

创建项目

create-react-app my-app 避免使用大写字母，为了严谨性，Linux 下是严格区分大小写的

key

key 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。